<template>
  <!-- 订单详情弹窗 -->
  <div
    class="dialog-overlay"
    :class="{ active: showOrderDialog }"
    v-if="showOrderDialog"
    @click.self="handleOverlayClick"
  >
    <div 
      class="dialog-content" 
      :class="{ 'bounce-in': showOrderDialog }"
      @click.stop
    >
      <div class="dialog-header">
        <div class="dialog-title">
          <h2>订单详情</h2>
          <div class="title-underline"></div>
        </div>
        <button class="close-btn" @click="closeOrderDialog">
          <i class="iconfont icon-close"></i>
        </button>
      </div>

      <div class="dialog-body">
        <!-- 订单基本信息 -->
        <div class="form-group">
          <label>
            <i class="iconfont icon-order"></i>
            订单号
          </label>
          <div class="form-input">{{ selectedOrder.order_number }}</div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="iconfont icon-user"></i>
              客户姓名
            </label>
            <div class="form-input">{{ selectedOrder.customer_name }}</div>
          </div>

          <div class="form-group">
            <label>
              <i class="iconfont icon-phone"></i>
              联系方式
            </label>
            <div class="form-input">{{ selectedOrder.phone }}</div>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="iconfont icon-type"></i>
              服务类型
            </label>
            <div class="form-input">{{ selectedOrder.type }}</div>
          </div>

          <div class="form-group">
            <label>
              <i class="iconfont icon-channel"></i>
              渠道
            </label>
            <div class="form-input">{{ selectedOrder.channel }}</div>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="iconfont icon-date-start"></i>
              开始日期
            </label>
            <div class="form-input">
              {{ formatDate(selectedOrder.start_date) }}
            </div>
          </div>

          <div class="form-group">
            <label>
              <i class="iconfont icon-date-end"></i>
              结束日期
            </label>
            <div class="form-input">
              {{ formatDate(selectedOrder.end_date) }}
            </div>
          </div>
        </div>

        <!-- 订单状态 -->
        <div class="form-group">
          <label>
            <i class="iconfont icon-status"></i>
            当前状态
          </label>
          <div class="form-input">{{ selectedOrder.status }}</div>
        </div>

        <!-- 金额信息 -->
        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="iconfont icon-deposit"></i>
              订金
            </label>
            <div class="form-input">{{ selectedOrder.deposit }}元</div>
          </div>
          <div class="form-group">
            <label>
              <i class="iconfont icon-payment"></i>
              尾款
            </label>
            <div class="form-input">{{ selectedOrder.final_payment }}元</div>
          </div>
        </div>

        <div class="form-group">
          <label>
            <i class="iconfont icon-total"></i>
            总金额
          </label>
          <div class="form-input">{{ selectedOrder.total_amount }}元</div>
        </div>

        <!-- 附加信息 -->
        <div class="form-group">
          <label>
            <i class="iconfont icon-description"></i>
            订单描述
          </label>
          <div class="form-input">
            {{ selectedOrder.description || "无描述信息" }}
          </div>
        </div>

        <!-- 负责人信息 -->
        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="iconfont icon-material"></i>
              素材状态
            </label>
            <div class="form-input">
              {{ selectedOrder.has_material > 0 ? "已上传" : "未上传" }}
            </div>
          </div>
        </div>
      </div>

      <div class="dialog-footer">
        <button class="btn status-btn" @click="openStatusDialog">
          <i class="iconfont icon-refresh"></i>更新状态
        </button>
        <button class="btn submit-btn" @click="editOrder">
          <i class="iconfont icon-edit"></i>编辑订单
        </button>
        <button class="btn material-btn" @click="handleMaterial">
          <i class="iconfont icon-file"></i>素材管理
        </button>
      </div>
    </div>

    <!-- 状态修改弹窗 -->
    <div class="status-dialog-overlay" v-if="showStatusEditDialog" @click.self="closeStatusDialog">
      <div class="status-dialog-content" @click.stop>
        <div class="status-dialog-header">
          <h3>修改订单状态</h3>
          <button class="close-btn" @click="closeStatusDialog">
            <i class="iconfont icon-close"></i>
          </button>
        </div>
        <div class="status-dialog-body">
          <div class="radio-group">
            <div
              class="radio-item"
              :class="{ active: tempStatus === '待处理' }"
              @click="tempStatus = '待处理'"
            >
              待处理
            </div>
            <div
              class="radio-item"
              :class="{ active: tempStatus === '进行中' }"
              @click="tempStatus = '进行中'"
            >
              进行中
            </div>
            <div
              class="radio-item"
              :class="{ active: tempStatus === '已完成' }"
              @click="tempStatus = '已完成'"
            >
              已完成
            </div>
          </div>
        </div>
        <div class="status-dialog-footer">
          <button class="btn cancel-btn" @click="closeStatusDialog">
            取消
          </button>
          <button class="btn submit-btn" @click="confirmStatusChange" :disabled="isUpdatingStatus">
            {{ isUpdatingStatus ? '保存中...' : '确认修改' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { format } from "date-fns";
import { useRouter } from "vue-router";
import { post } from "@/request";
import { vToast } from "@/plugins/vToast";

const props = defineProps({
  order: {
    type: Object,
    required: true,
    default: () => ({
      id: "",
      order_number: "",
      customer_name: "",
      phone: "",
      type: "",
      channel: "",
      start_date: "",
      end_date: "",
      status: "",
      total_amount: 0,
      deposit: 0,
      final_payment: 0,
      description: "",
      member_name: "",
      has_material: 0,
    }),
  },
  showDialog: Boolean,
});

const emit = defineEmits(["close", "status-updated"]);

const router = useRouter();
const selectedOrder = ref({ ...props.order });
const showOrderDialog = ref(props.showDialog);
const showStatusEditDialog = ref(false);
const tempStatus = ref("");
const isUpdatingStatus = ref(false);

// 确保在组件挂载时显示弹窗
onMounted(() => {
  if (props.showDialog) {
    showOrderDialog.value = true;
  }
});

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return "";
  return format(new Date(dateString), "yyyy-MM-dd");
};

// 关闭弹窗
const closeOrderDialog = () => {
  emit("close");
};

// 处理遮罩层点击
const handleOverlayClick = () => {
  closeOrderDialog();
};

// 打开状态修改弹窗
const openStatusDialog = () => {
  tempStatus.value = selectedOrder.value.status;
  showStatusEditDialog.value = true;
};

// 关闭状态修改弹窗
const closeStatusDialog = () => {
  showStatusEditDialog.value = false;
};

// 确认修改状态
const confirmStatusChange = async () => {
  if (!tempStatus.value || tempStatus.value === selectedOrder.value.status) {
    closeStatusDialog();
    return;
  }

  try {
    isUpdatingStatus.value = true;
    const res = await post("/order/setStatus", {
      id: selectedOrder.value.id,
      status: tempStatus.value
    });

    if (res && res.code === 200) {
      vToast({ message: "订单状态更新成功" });
      selectedOrder.value.status = tempStatus.value;
      emit("status-updated", { 
        id: selectedOrder.value.id, 
        status: tempStatus.value 
      });
      // 同时关闭两个弹窗
      closeStatusDialog();
      closeOrderDialog();
    } else {
      vToast({ message: res?.msg || "订单状态更新失败" });
    }
  } catch (error) {
    console.error("更新订单状态失败:", error);
    vToast({ message: "订单状态更新失败，请稍后重试" });
  } finally {
    isUpdatingStatus.value = false;
  }
};

// 编辑订单
const editOrder = () => {
  router.push({
    name: "orderModify",
    query: { id: props.order.id },
  });
  closeOrderDialog();
};

// 处理素材
const handleMaterial = () => {
  router.push({
    name: "materialDetail",
    query: { id: props.order.id },
  });
  closeOrderDialog();
};

// 监听props变化
watch(
  () => props.order,
  (newVal) => {
    selectedOrder.value = { ...newVal };
  },
  { deep: true }
);

watch(
  () => props.showDialog,
  (newVal) => {
    if (newVal) {
      showOrderDialog.value = true;
    } else {
      // 关闭时添加延迟以允许动画完成
      setTimeout(() => {
        showOrderDialog.value = false;
      }, 300);
    }
  }
);
</script>

<style scoped lang="less">
/* 弹窗遮罩层 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  overflow: hidden;
  transition: background-color 0.3s ease-out;
  cursor: default;

  &.active {
    background-color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
  }
}

/* 弹窗内容容器 */
.dialog-content {
  width: 500px;
  max-width: 90vw;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transform: translateY(40px) scale(0.95);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 100000;
  cursor: default;

  /* 弹入动画 */
  &.bounce-in {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* 弹窗头部 */
  .dialog-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bs-theme-color);
    color: white;
    position: relative;
    z-index: 2;

    .dialog-title {
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }

      .title-underline {
        height: 2px;
        width: 40px;
        background: white;
        border-radius: 1px;
        margin-top: 6px;
      }
    }

    .close-btn {
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }

  /* 弹窗主体 */
  .dialog-body {
    padding: 15px;
    position: relative;
    z-index: 2;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    
    .form-group {
      margin-bottom: 12px;

      label {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #606266;
        margin-bottom: 6px;

        .iconfont {
          margin-right: 6px;
          font-size: 14px;
        }
      }

      .form-input {
        width: 100%;
        padding: 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 13px;
        transition: all 0.3s;
        background: white;
        color: #333;
      }
    }

    .form-row {
      display: flex;
      gap: 12px;

      .form-group {
        flex: 1;
      }
    }
  }

  /* 弹窗底部 */
  .dialog-footer {
    padding: 12px 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f5f7fa;
    border-top: 1px solid #dcdfe6;
    position: relative;
    z-index: 2;

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;

      &.status-btn {
        background: #ffba00;
        color: white;
        border-color: #ffba00;

        &:hover {
          background: #ffc933;
          transform: translateY(-1px);
        }
      }

      &.submit-btn {
        background: var(--bs-theme-color);
        color: white;
        border-color: var(--bs-theme-color);

        &:hover {
          background: #66b1ff;
          transform: translateY(-1px);
        }
      }

      &.material-btn {
        background: #67c23a;
        color: white;
        border-color: #67c23a;

        &:hover {
          background: #85ce61;
          transform: translateY(-1px);
        }
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
      }
    }
  }
}

/* 状态修改弹窗样式 */
.status-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100001;
}

.status-dialog-content {
  width: 400px;
  max-width: 90vw;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  animation: dialog-fade-in 0.3s ease-out;
}

.status-dialog-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bs-theme-color);
  color: white;

  h3 {
    margin: 0;
    font-size: 16px;
  }

  .close-btn {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}

.status-dialog-body {
  padding: 20px;

  .radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .radio-item {
      padding: 12px 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      background-color: #fff;
      color: #606266;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.2s;

      &:hover {
        background-color: #f5f7fa;
      }

      &.active {
        background-color: var(--bs-theme-color);
        color: white;
        border-color: var(--bs-theme-color);
      }
    }
  }
}

.status-dialog-footer {
  padding: 12px 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f5f7fa;
  border-top: 1px solid #dcdfe6;

  .btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;

    &.cancel-btn {
      background: white;
      color: #606266;

      &:hover {
        background: #f2f6fc;
      }
    }

    &.submit-btn {
      background: var(--bs-theme-color);
      color: white;
      border-color: var(--bs-theme-color);

      &:hover {
        background: #66b1ff;
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }
  }
}

/* 动画 */
@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 600px) {
  .dialog-content,
  .status-dialog-content {
    width: 90vw;
  }

  .dialog-footer,
  .status-dialog-footer {
    flex-wrap: wrap;

    .btn {
      flex: 1;
      min-width: 100px;
      padding: 6px 12px;
      font-size: 12px;
    }
  }
}
</style>